<template>
  <div>
    <h2>{{ singerName }} 的歌曲</h2>
    <div>
      <ul>
        <li v-for="song in songs" :key="song.id">{{ song.name }} - {{ song.album }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      singerName: '', // 歌手名字
      songs: [], // 存储歌曲列表
    };
  },
  methods: {
    loadSongsByArtist(artist) {
      // 发起请求获取歌手的歌曲列表
      axios.get(`/api/songs/by-artist?artist=${artist}`)
        .then((response) => {
          this.songs = response.data;
        })
        .catch((error) => {
          console.error('获取歌曲列表失败: ', error);
        });
    },
  },
  created() {
    // 在页面创建时加载歌手的歌曲列表
    this.singerName = this.$route.params.name; // 从路由参数获取歌手名字
    this.loadSongsByArtist(this.singerName);
  },
};
</script>
